<script setup lang="ts">
import {reqUserCollection, reqRemoveUserCollection} from "@/api/user";
import {onMounted, ref} from "vue";
import {onReachBottom} from "@dcloudio/uni-app";


const options = [{
  text: '删除',
  style: {
    backgroundColor: '#f56c6c'
  }
}]

const list = ref([])
const count = ref(0)

onMounted(async () => {
  await getGoodsItem();
})

async function getGoodsItem() {
  await reqUserCollection(info).then((res: any) => {
    if (res.code == 200) {
      if (res.data.length > 0) {
        list.value.push(...res.data)
        count.value = list.value.length
        uni.setNavigationBarTitle({
          title: "我的收藏（" + res.total + "）"
        })
      } else {
        isData.value = false
      }
    }
  })
}

const deletes = async (id: any) => {
  await reqRemoveUserCollection({ids: [id]}).then(async (res: any) => {
    await getGoodsItem();
    uni.showToast({
      title: '删除成功',
      icon: 'none'
    })
  })
}

const info = ref({
  page: 1,
  limit: 10
})

onReachBottom(async () => {
  if (isData.value) {
    info.value.page++
    await getGoodsItem();
  }
})

const isData = ref(true)
</script>

<template>
  <view class="bar"></view>

  <view>
    <u-swipe-action v-if="count>0">
      <u-swipe-action-item
          @click="deletes(item.id)"
          v-for="(item,index) in list"
          :options="options"
          :key="item.id"
      >
        <goodsItem :index="index" :item="item"></goodsItem>
      </u-swipe-action-item>
    </u-swipe-action>

    <u-empty
        v-else
        mode="data"
        icon="http://cdn.uviewui.com/uview/empty/data.png"
    >
    </u-empty>
  </view>
  <u-divider
      v-if="!isData"
      text="没有更多数据了~"
  ></u-divider>
</template>

<style scoped lang="scss">

</style>
